<!--  -->
<template>
  <div class="padding-20 font-weight-700 whole-box flex-column">
    <div class="font-size-16 font-weight-700 margin-bottom-20 title-box">收缴状况</div>
    <div class="flex tab-box">
      <div class="tab cursor-pointer margin-right-10" :class="item.type == currentTab ? 'active' : 'no-active'" v-for="(item, index) in tabList" :key="index" @click="tabChange(item)">{{ item.lable }}</div>
    </div>
    <div class="flex-1">
      <table-arrearage v-if="currentTab == 'arrearageOut'" key="arrearageOut" ref="arrearageOut" pageType="group"></table-arrearage>
      <table-arrearage v-if="currentTab == 'arrearageInline'" key="arrearageInline" ref="arrearageInline" pageType="group"></table-arrearage>
      <table-capture v-if="currentTab == 'captureCash'" key="captureCash" ref="captureCash"></table-capture>
      <table-capture v-if="currentTab == 'captureLimit'" key="captureLimit" ref="captureLimit"></table-capture>
    </div>
  </div>
</template>
<script>
  //group:集团视图
  import { apiViewBlocCapture } from '@a/about';
  import { accMul } from '@/common/js/utils.js';
  import tableArrearage from './tableArrearage';
  import tableCapture from './tableCapture';
  export default {

    data() {
      return {
        currentTab: 'arrearageOut',
        projectKey: localStorage.getItem('projectKey'),
        tabList: [
          {
            type: 'arrearageOut',
            lable: '欠费(30天以上)',
          },
          {
            type: 'arrearageInline',
            lable: '欠费(30天以内)',
          },
          {
            type: 'captureCash',
            lable: '收缴率(现金流)',
          },
          {
            type: 'captureLimit',
            lable: '收缴率(权责)',
          },
        ],
      };
    },

    methods: {
      //收缴状况
      async getSourse() {
      },

      //tab切换
      tabChange(item) {
        this.currentTab = item.type;
      },
    },

    mounted() {
      this.getSourse();
    },

    components: { tableArrearage, tableCapture },
  };
</script>
<style scoped lang="scss">
  .tab-box {
    margin-top: -17px;
    .tab {
      width: 106px;
      height: 38px;
      line-height: 38px;
      text-align: center;
    }
  }

  .active {
    background: rgba($color: #3384fe, $alpha: 0.1);
    border-radius: 3px;
    color: #3384fe;
  }
  .no-active {
    background: rgba($color: #d1cbcb, $alpha: 0.1);
    border-radius: 3px;
    color: #333;
  }
  .whole-box {
    height: 100%;
    background: #fff;
  }
  .title-box {
    height: 28px;
  }
</style>
